<%--
  Created by IntelliJ IDEA.
  User: 铃
  Date: 2024/9/22
  Time: 19:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="js/jquery.js"></script>
<body>
<h1>Ajax GET请求案例</h1>
<form action="" id="myForm">
    <label>姓名：</label>
    <input type="text" id="name">
    <br>
    <label>年龄：</label>
    <input type="text" id="age">
    <br>
    <button type="submit">提交</button>
</form>
<div id="responseDiv" style="display: none">
    <h3>返回数据：</h3>
    <pre id="response"></pre>
</div>
</body>
<script>
    $(document).ready(function (){
        $("#myForm").submit(function (){
            event.preventDefault();
            var name=$("#name").val();
            var age=$("#age").val();
            var queryString='name='+encodeURIComponent(name)+'&age='+age;

            $.ajax({
                url:'processData'+queryString,
                type:'GET',
                success:function (response){
                    $('#response').text(response);
                    $('#responseDiv').show();
                },
                error:function (xhr,status,error){
                    console.log('Error'+error)
                }

            })
        })
    })
</script>
</html>
